<route lang="yaml">
meta:
  enabled: false
</route>

<script setup lang="ts">
import Sortable from 'sortablejs'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import useSettingsStore from '@/store/modules/settings'
import Api from '@/api/modules/system/menu'

defineOptions({
  name: 'PagesExampleMenuDetail',
})

const route = useRoute()
const router = useRouter()
const tabbar = useTabbar()

const settingsStore = useSettingsStore()

const loading = ref(false)
const formRef = ref<FormInstance>()
const form = ref({
  id: route.query.id as string ?? '',
  parentId: route.query.parentId ?? '',
  path: '',
  redirect: '',
  name: '',
  component: '',
  sort: 0,
  meta: {
    title: '',
    icon: '',
    activeIcon: '',
    defaultOpened: false,
    permanent: false,
    auth: [] as string[],
    sidebar: true,
    breadcrumb: true,
    activeMenu: '',
    cache: [] as string[] | boolean,
    noCache: [] as string[],
    badge: '',
    link: '',
    iframe: '',
    copyright: false,
    paddingBottom: '0px',
  },
  auths: [] as {
    name: string
    value: string
  }[],
})
const formRules = ref<FormRules>({
  'path': [
    { required: true, message: '请输入路由地址', trigger: 'blur' },
  ],
  'meta.title': [
    { required: true, message: '请输入显示名称', trigger: 'blur' },
  ],
})

onMounted(() => {
  console.log('菜单详情--打印传参数', route.query.id,
  )
  console.log('菜单详情--开始', form)
  if (form.value.id !== '') {
    getInfo()
  }
})

function getInfo() {
  loading.value = true
  Api.detail({ id: form.value.id }).then((res: any) => {
    console.log(res, '菜单详情')
    // if (res.data.auths) {
    // }
    // else {
    //   res.data.auths = []
    // }
    // res.data.meta = JSON.parse(res.data.meta)
    const obj = res.data ? res.data : res
    loading.value = false
    form.value.id = obj.id
    form.value.parentId = obj.parentId
    form.value.path = obj.path
    form.value.redirect = obj.redirect
    form.value.name = obj.name
    form.value.component = obj.component
    form.value.sort = obj.sort

    Object.assign(form.value.meta, obj.meta)
    form.value.auths = obj.auths
  })
}

// 鉴权标识
const inputAuth = ref('')
const inputAuthVisible = ref(false)
const InputAuthRef = ref()
function onInputAuthClose(tag: string) {
  form.value.meta.auth.splice(form.value.meta.auth.indexOf(tag), 1)
}
function onInputAuthShow() {
  inputAuthVisible.value = true
  nextTick(() => {
    InputAuthRef.value!.input!.focus()
  })
}
function onInputAuthConfirm() {
  if (inputAuth.value) {
    if (!form.value.meta.auth.includes(inputAuth.value)) {
      form.value.meta.auth.push(inputAuth.value)
    }
    else {
      ElMessage.warning('标识已存在')
    }
  }
  inputAuthVisible.value = false
  inputAuth.value = ''
}

// 缓存规则
const inputCache = ref('')
const inputCacheVisible = ref(false)
const InputCacheRef = ref()
function onInputCacheClose(tag: string) {
  typeof form.value.meta.cache === 'object' && form.value.meta.cache.splice(form.value.meta.cache.indexOf(tag), 1)
}
function onInputCacheShow() {
  inputCacheVisible.value = true
  nextTick(() => {
    InputCacheRef.value!.input!.focus()
  })
}
function onInputCacheConfirm() {
  if (inputCache.value && typeof form.value.meta.cache === 'object') {
    if (!form.value.meta.cache.includes(inputCache.value)) {
      form.value.meta.cache.push(inputCache.value)
    }
    else {
      ElMessage.warning('规则已存在')
    }
  }
  inputCacheVisible.value = false
  inputCache.value = ''
}

// 不缓存规则
const inputNoCache = ref('')
const inputNoCacheVisible = ref(false)
const InputNoCacheRef = ref()
function onInputNoCacheClose(tag: string) {
  form.value.meta.noCache.splice(form.value.meta.noCache.indexOf(tag), 1)
}
function onInputNoCacheShow() {
  inputNoCacheVisible.value = true
  nextTick(() => {
    InputNoCacheRef.value!.input!.focus()
  })
}
function onInputNoCacheConfirm() {
  if (inputNoCache.value) {
    if (!form.value.meta.noCache.includes(inputNoCache.value)) {
      form.value.meta.noCache.push(inputNoCache.value)
    }
    else {
      ElMessage.warning('规则已存在')
    }
  }
  inputNoCacheVisible.value = false
  inputNoCache.value = ''
}

const authsTableRef = ref()
const authsTableKey = ref(0)
onMounted(() => {
  onAuthDarg()
})
function onAuthAdd() {
  form.value.auths.push({
    name: '',
    value: '',
  })
  nextTick(() => {
    authsTableRef.value.setScrollTop(form.value.auths.length * 50)
  })
}
function onAuthDelete(index: number) {
  form.value.auths.splice(index, 1)
}
function onAuthDarg() {
  const tbody = authsTableRef.value.$el.querySelector('.el-table__body-wrapper tbody')
  Sortable.create(tbody, {
    handle: '.sortable',
    animation: 300,
    ghostClass: 'ghost',
    onEnd: ({ newIndex, oldIndex }) => {
      if (newIndex === undefined || oldIndex === undefined) {
        return
      }
      const currRow = form.value.auths.splice(oldIndex, 1)[0]
      form.value.auths.splice(newIndex, 0, currRow)
      authsTableKey.value += 1
      nextTick(() => onAuthDarg())
    },
  })
}
const obj: any = ref({})
function onSubmit() {
  console.log(form.value, 'form.value')
  if (form.value.id === '') {
    formRef.value && formRef.value.validate((valid) => {
      if (valid) {
        form.value.sort = Number(form.value.sort)
        obj.value = Object.assign(obj.value, form.value)
        obj.value.auths = obj.value.auths.map((i: any) => {
          return { ...i, id: '' }
        })
        obj.value.auths = JSON.stringify(obj.value.auths)
        obj.value.meta = JSON.stringify(obj.value.meta)
        Api.edit(obj.value).then((res: any) => {
          goBack()
          ElMessage({ message: res.msg, type: 'success' })
        })
      }
    })
  }
  else {
    formRef.value && formRef.value.validate((valid) => {
      if (valid) {
        obj.value = Object.assign(obj.value, form.value)
        obj.value.auths = obj.value.auths.map((i: any) => {
          return { ...i, id: i.id ? i.id : '' }
        })
        obj.value.auths = JSON.stringify(obj.value.auths)
        obj.value.meta = JSON.stringify(obj.value.meta)
        Api.edit(obj.value).then((res: any) => {
          ElMessage({ message: res.msg, type: 'success' })
          goBack()
        })
      }
    })
  }
}

function onCancel() {
  goBack()
}

// 返回列表页
function goBack() {
  if (settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.mergeTabsBy !== 'activeMenu') {
    tabbar.close({ name: 'menuindex' })
  }
  else {
    router.push({ name: 'menuindex' })
  }
}
</script>

<template>
  <div class="absolute-container">
    <page-header :title="route.name === 'menudetail' ? '新增菜单' : '编辑菜单'">
      <el-button size="default" round @click="goBack">
        <template #icon>
          <svg-icon name="ep:arrow-left" />
        </template>
        返回
      </el-button>
    </page-header>
    <div v-loading="loading" class="page-main" style="height: calc(100vh - 240px);overflow-y: auto;">
      <el-form ref="formRef" :model="form" :rules="formRules" label-position="top">
        <LayoutContainer right-side-width="500px" hide-right-side-toggle>
          <page-header v-if="!!form.parentId" title="基础配置" content="标准路由配置，包含 path/redirect/name/component" />
          <el-row v-if="!!form.parentId" :gutter="30" style="padding: 20px;">
            <el-col :xl="12" :lg="24">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="form.path" clearable placeholder="请输入路由地址" />
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="24">
              <el-form-item label="重定向" prop="redirect">
                <el-input v-model="form.redirect" clearable placeholder="请输入重定向地址" />
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="24">
              <el-form-item prop="name">
                <template #label>
                  路由命名
                  <span class="label-tip">即 name ，系统唯一</span>
                </template>
                <el-input v-model="form.name" clearable placeholder="请输入路由命名" />
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="24">
              <el-form-item prop="component">
                <template #label>
                  组件路径
                  <span class="label-tip">
                    顶级路由请设置“<el-link type="primary" :underline="false" @click.prevent="form.component = 'Layout'">Layout</el-link>”，中间层级路由无需设置
                  </span>
                </template>
                <el-input v-model="form.component" clearable placeholder="请输入完整组件路径">
                  <template v-if="form.component !== 'Layout'" #prepend>
                    /src/views/
                  </template>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <page-header title="扩展配置">
            <template #content>
              <!-- <div style="display: flex;">
                框架扩展配置，详细配置介绍请查看<el-link type="primary" href="https://fantastic-admin.gitee.io/guide/router.html#%E5%AF%BC%E8%88%AA%E9%85%8D%E7%BD%AE" target="_blank">
                  框架文档
                </el-link>
              </div> -->
            </template>
          </page-header>
          <el-row :gutter="30" style="padding: 20px;">
            <el-col :xl="12" :lg="24">
              <el-form-item label="显示名称" prop="meta.title">
                <el-input v-model="form.meta.title" clearable placeholder="请输入显示名称" />
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="24">
              <el-form-item prop="meta.auth">
                <template #label>
                  鉴权标识
                  <el-tooltip content="当设置多个标识时，只要命中其中一个则鉴权通过" placement="top">
                    <svg-icon name="ri:question-line" />
                  </el-tooltip>
                </template>
                <el-space>
                  <el-tag v-for="item in (form.meta.auth as string[])" :key="item" size="large" closable :disable-transitions="false" @close="onInputAuthClose(item)">
                    {{ item }}
                  </el-tag>
                  <el-input v-if="inputAuthVisible" ref="InputAuthRef" v-model="inputAuth" style="width: 200px;" @keyup.enter="onInputAuthConfirm" @blur="onInputAuthConfirm" />
                  <el-button v-else @click="onInputAuthShow">
                    新增
                  </el-button>
                </el-space>
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="24">
              <el-form-item label="默认图标" prop="meta.icon">
                <icon-picker v-model="form.meta.icon" />
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="24">
              <el-form-item label="激活图标" prop="meta.activeIcon">
                <icon-picker v-model="form.meta.activeIcon" />
              </el-form-item>
            </el-col>
            <el-col :xl="12" :lg="24">
              <el-form-item label="排序:" prop="sort">
                <el-input
                  v-model="form.sort" type="number" :min="0"

                  controls-position="right"
                  class="ele-fluid ele-text-left"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :xl="12" :lg="24">
              <el-form-item label="父级ID:">
                <el-input v-model="form.parentId" clearable placeholder="请输入父级ID" />
              </el-form-item>
            </el-col> -->

            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item label="默认展开" prop="meta.defaultOpened">
                <el-switch v-model="form.meta.defaultOpened" inline-prompt active-text="是" inactive-text="否" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.permanent">
                <template #label>
                  常驻标签页
                  <span class="label-tip">请勿在带有参数的路由地址上开启该设置</span>
                </template>
                <el-switch v-model="form.meta.permanent" inline-prompt active-text="是" inactive-text="否" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item label="在导航显示" prop="meta.sidebar">
                <el-switch v-model="form.meta.sidebar" inline-prompt active-text="显示" inactive-text="隐藏" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item label="在面包屑显示" prop="meta.breadcrumb">
                <el-switch v-model="form.meta.breadcrumb" inline-prompt active-text="显示" inactive-text="隐藏" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.cache">
                <template #label>
                  缓存规则
                  <el-tooltip content="当跳转到设置的路由时，则会对当前路由进行缓存" placement="top">
                    <svg-icon name="ri:question-line" />
                  </el-tooltip>
                  <span v-show="typeof form.meta.cache === 'object'" class="label-tip">切换为<el-link type="primary" :underline="false" @click.prevent="form.meta.cache = true">始终缓存</el-link></span>
                  <span v-show="typeof form.meta.cache === 'boolean'" class="label-tip">切换为<el-link type="primary" :underline="false" @click.prevent="form.meta.cache = []">规则模式</el-link></span>
                </template>
                <el-space v-show="typeof form.meta.cache === 'object'">
                  <el-tag v-for="item in (form.meta.cache as string[])" :key="item" size="large" closable :disable-transitions="false" @close="onInputCacheClose(item)">
                    {{ item }}
                  </el-tag>
                  <el-input v-if="inputCacheVisible" ref="InputCacheRef" v-model="inputCache" style="width: 200px;" @keyup.enter="onInputCacheConfirm" @blur="onInputCacheConfirm" />
                  <el-button v-else @click="onInputCacheShow">
                    新增
                  </el-button>
                </el-space>
                <div v-show="typeof form.meta.cache === 'boolean'">
                  始终缓存
                </div>
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.noCache">
                <template #label>
                  不缓存规则
                  <el-tooltip content="当跳转到设置的路由时，则会对当前路由取消缓存" placement="top">
                    <svg-icon name="ri:question-line" />
                  </el-tooltip>
                  <span class="label-tip">当缓存规则为“始终缓存”时生效</span>
                </template>
                <el-space>
                  <el-tag v-for="item in (form.meta.noCache as string[])" :key="item" size="large" closable :disable-transitions="false" @close="onInputNoCacheClose(item)">
                    {{ item }}
                  </el-tag>
                  <el-input v-if="inputNoCacheVisible" ref="InputNoCacheRef" v-model="inputNoCache" style="width: 200px;" @keyup.enter="onInputNoCacheConfirm" @blur="onInputNoCacheConfirm" />
                  <el-button v-else @click="onInputNoCacheShow">
                    新增
                  </el-button>
                </el-space>
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.activeMenu">
                <template #label>
                  高亮导航
                  <span class="label-tip">如果子路由不在导航显示，则需要设置高亮的上级路由地址</span>
                </template>
                <el-input v-model="form.meta.activeMenu" clearable placeholder="请输入高亮导航的完整路由地址" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.badge">
                <template #label>
                  徽标
                  <span class="label-tip">不宜设置太长，建议控制在4个字符内</span>
                </template>
                <el-input v-model="form.meta.badge" clearable placeholder="请输入徽标显示内容" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.link">
                <template #label>
                  访问外链
                  <span class="label-tip">请设置 http/https 开头的完整外链地址</span>
                </template>
                <el-input v-model="form.meta.link" clearable placeholder="请输入网址" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.iframe">
                <template #label>
                  内嵌网页
                  <span class="label-tip">请勿与外链同时设置，同时设置时，本设置会失效</span>
                </template>
                <el-input v-model="form.meta.iframe" clearable placeholder="请输入网址" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item label="底部版权" prop="meta.copyright">
                <el-switch v-model="form.meta.copyright" inline-prompt active-text="显示" inactive-text="隐藏" />
              </el-form-item>
            </el-col>
            <el-col v-if="!!form.parentId" :xl="12" :lg="24">
              <el-form-item prop="meta.paddingBottom">
                <template #label>
                  底部填充高度
                  <span class="label-tip">请设置有效的长度单位，例如：px/em/rem等</span>
                </template>
                <el-input v-model="form.meta.paddingBottom" clearable placeholder="请输入显示名称" />
              </el-form-item>
            </el-col>
          </el-row>
          <template #rightSide>
            <page-header title="权限池">
              <template #content>
                <p>设置导航所具备的所有权限，权限池内的权限会用于角色管理</p>
                <p style="margin-bottom: 0;">
                  通常只在最子级导航上进行设置
                </p>
              </template>
            </page-header>
            <el-table ref="authsTableRef" :key="authsTableKey" :data="form.auths" stripe highlight-current-row border>
              <el-table-column width="60" align="center" fixed>
                <template #header>
                  <el-button type="primary" size="small" plain circle @click="onAuthAdd">
                    <template #icon>
                      <svg-icon name="ep:plus" />
                    </template>
                  </el-button>
                </template>
                <template #default="scope">
                  <span class="index">{{ scope.$index + 1 }}</span>
                  <el-button type="danger" size="small" plain circle class="delete" @click="onAuthDelete(scope.$index)">
                    <template #icon>
                      <svg-icon name="ep:delete" />
                    </template>
                  </el-button>
                </template>
              </el-table-column>
              <el-table-column width="80" align="center" fixed>
                <template #header>
                  排序
                </template>
                <template #default>
                  <el-tag type="info" class="sortable">
                    <svg-icon name="ep:d-caret" />
                  </el-tag>
                </template>
              </el-table-column>

              <el-table-column label="名称">
                <template #default="scope">
                  <el-input v-model="scope.row.name" />
                </template>
              </el-table-column>
              <el-table-column label="标识">
                <template #default="scope">
                  <el-input v-model="scope.row.value" />
                </template>
              </el-table-column>
            </el-table>
          </template>
        </LayoutContainer>
      </el-form>
    </div>
    <fixed-action-bar>
      <el-button type="primary" size="large" @click="onSubmit">
        提交
      </el-button>
      <el-button size="large" @click="onCancel">
        取消
      </el-button>
    </fixed-action-bar>
  </div>
</template>

<style lang="scss" scoped>
.absolute-container {
  position: absolute;
  // display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .page-header {
    margin-bottom: 0;
  }

  .page-main,
  .el-form {
    display: flex;
    // 让 page-main 的高度自适应
    flex: 1;
    flex-direction: column;
    overflow: auto;
  }

  .page-main {
    .flex-container {
      position: static;

      .page-header {
        margin-inline: -15px;
        margin-top: -15px;
        background-color: var(--el-disabled-bg-color);
      }

      :deep(.main) {
        .label-tip {
          display: inline-flex;
          margin-left: 10px;
          color: var(--el-text-color-disabled);
        }
      }

      :deep(.right-side) {
        display: flex;
        flex-direction: column;

        .el-table {
          height: 100%;
          margin-top: 15px;

          .el-table__row {
            &.ghost {
              opacity: 0;
            }

            .index {
              display: inline-block;
            }

            .delete {
              display: none;
            }

            &:hover {
              .index {
                display: none;
              }

              .delete {
                display: inline-block;
              }
            }

            .el-tag.sortable,
            .el-tag.sortable .icon {
              cursor: ns-resize;
            }
          }
        }
      }
    }
  }
}
</style>
